/***************************4种字体标题特效******************************/
$titleSpacial:(
    'jump':jump,//标题跳动
    'pop':pop,//标题放大
    'flip':flip,//标题翻转
    'blink':blink//标题闪亮
);
@each $key,$value in $titleSpacial {
    .title-#{$key}{
        display: inline-block;
        animation: 0.4s $value ease-in-out var(--delay) infinite;
    }
}
@keyframes jump {
  //标题跳动
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes pop {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

@keyframes flip {
  0%,
  100% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(90deg);
  }
}

@keyframes blink {
  0%,
  100% {
    color: inherit;
  }
  50% {
    color: red;
  }
}

/***************************字体跳动******************************/
.title-tiao{
  display: inline-block;
  overflow: hidden;
  position: relative;
  top: .8rem;
  animation: .3s swift-up ease-in-out forwards;
}
.title-tiao-i{
  font-style: normal;
  position: relative;
  top: 2rem;
  animation: .5s swift-up ease-in-out forwards;
}
@keyframes swift-up {
  to {
      top: 0rem;
  }
}

